﻿@page "/Grid/Columns/FixedColumns"
@layout DataProviderAccessArea<INwindDataProvider>

<DemoPageSectionComponent Id="Grid-Columns-FixedColumns" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject NwindDataService NwindDataService
        <div class="grid-container">
            <DxGrid Data="@Data"
                    TextWrapEnabled="false"
                    SizeMode="Params.SizeMode" ShowAllRows="true"
                    ColumnResizeMode="GridColumnResizeMode.NextColumn"
                    HighlightRowOnHover="true">
                <Columns>
                    <DxGridSelectionColumn FixedPosition="GridColumnFixedPosition.Left" Width="60px" />
                    <DxGridDataColumn FieldName="ContactName" Width="190px" />
                    <DxGridDataColumn FieldName="ContactTitle" Width="200px" />
                    <DxGridDataColumn FieldName="CompanyName" FixedPosition="GridColumnFixedPosition.Left" Width="240px" />
                    <DxGridDataColumn FieldName="City" FixedPosition="CityColumnFixedPosition" Width="100px" />
                    <DxGridDataColumn FieldName="Country" Width="100px" />
                    <DxGridDataColumn FieldName="Address" Width="270px" />
                    <DxGridDataColumn FieldName="Fax" Width="120px" />
                    <DxGridDataColumn FieldName="PostalCode" Width="100px" />
                    <DxGridDataColumn FieldName="Phone" Width="150px" />
                </Columns>
                <ToolbarTemplate>
                    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain" SizeMode="Params.SizeMode">
                        <Items>
                            <DxToolbarItem BeginGroup="true" Alignment="ToolbarItemAlignment.Left">
                                <Template Context="toolbar_item_context">
                                    <div class="d-flex flex-row align-items-center h-100">
                                        <DxCheckBox @bind-Checked="FixCityToRight">Fix the City column to the right</DxCheckBox>                                    
                                    </div>
                                </Template>
                            </DxToolbarItem>
                        </Items>
                    </DxToolbar>
                </ToolbarTemplate>
            </DxGrid>
        </div>
    </ChildContentWithParameters>

    @code {
        object Data { get; set; }
        bool FixCityToRight { get; set; } = true;

        GridColumnFixedPosition CityColumnFixedPosition {
            get { return FixCityToRight ? GridColumnFixedPosition.Right : GridColumnFixedPosition.None; }
        }

        protected override async Task OnInitializedAsync() {
            Data = await NwindDataService.GetSuppliersAsync();
        }
    }
</DemoPageSectionComponent>
